Level 1
level 1
helow my name is rahul verma
level 1
helow my name is rahul verma
internal css using style tag
my
name
is
rahul
External css exaple
my name is rahul verma
hyper text markup language
cascading stylesheet
7.css
h1 {
color : red;
}
body{
background-color: pink;
}
button{
color : blue;
background-color : yellow;
}
7.html
External css exaple
my name is rahul verma
hyper text markup language
cascading stylesheet
click me
UNIVERSAL SELECTOR
External css exaple
my name is rahul verma
hyper text markup language
cascading stylesheet
click me
7.CSS
*{
color: blue;}
7.CSS
H1{
COLOR: BLUE ;
BACKGROUND-COLOR : GRAY;
}
1.HTML
ELEMENT SELECTOR
my name is rahul verma
hyper text markup language
cascading stylesheet
click me
7.css
#a{
COLOR: GREEN;
}
#b{
COLOR: RED;
}
#c{
COLOR: yellow;
}
#d{
COLOR: purple;
}
n.html
ID SELCECTO EXAMPLE
my name is rahul verma
hyper text markup language
cascading stylesheet
click me
7.css
#a{
COLOR: GREEN;
}
.b{
COLOR: RED;
}
#d{
COLOR: purple;
}
n.html
class SELCECTO EXAMPLE
my name is rahul verma
hyper text markup language
cascading stylesheet
click me
7.css
/*Q1. create a simple div with an id "box" add some test contain inside the div set its backgroumnd color to blue */
#box{
background-color: blue;
}
7.html
practice set problem 1
my name is rahul verma .
7.css
/* Q2. create a headings with h1,h2,h3 a give them all a class "heading" & set color of heading read. */
.heading{
color: red;
/* border: 5px solid green; width : 300px;
background-color : pink; */
}
/* h1,h2,h3{
color : blue;
} */
7.html
practice set problem 2
this is a heading first
this is a heading second
this is a heading third
7.css
/* Q3.create a button & set its background color
* green using css stylesheet
* blue using style tag
* pink using inline style */
button{
background-color: green;
}
/* button {
border: 5px solid orange;
} */
7.html
practice set problem 3
inline css
7.css
/* my pratics
/* Q3.create a button & set its background color
* green using css stylesheet
* blue using style tag
* pink using inline style */
#css{
background-color: green;
}
/* button {
border: 5px solid orange;
} */
7.html
practice set problem 3
using ccs stylesheet usin style tag inline css
7.css
/* Text properties */
/* text-align -> right,center,left */
h1{
text-align: left
}
h2{
text-align: center;
}
h3{
text-align: right;
}
7.html
test-aligh eg
my name is
7.css
/* according to new version css3 */
/* Text properties */
/* text-align -> right,center,left */
h1{
text-align: start
}
h2{
text-align: center;
}
h3{
text-align: end;
}
7.html
test-aligh eg
my name is
7.css
/* according to new version css3 */
/* Text properties */
/* text-align -> right,center,left */
h1{
text-decoration: underline;
}
h2{
text-decoration: overline;
}
h3{
text-decoration: line-through;
}
7.html
test-aligh eg
underline
overline
line-through
7.css
/* according to new version css3 */
/* Text properties */
/* text-align -> none */
a{
text-decoration: none;
}
7,hmtl
test-aligh eg
google.com
7.css
/* Text properties */
/* text-decoration */
a{
text-decoration: red wavy line-through;
}
7.html
test-aligh eg
google.com
7.css
/* Text properties */
/* font-weight eg-> normal,bold,bolder,lighter*/
/* using id selector */
#h1{
font-weight: norml;
}
#h2{
font-weight: lighter;
}
#p2{
font-weight: bolder;
}
#p1{
font-weight: bold;
}
7.html
font weight eg -> normal,bold,bolder,lighter
normal
lighter
bold
bolder
7.CSS
/* Text properties */
/* font-weight eg-> normal,bold,bolder,lighter*/
/* using id selector */
#h1{
font-weight:100;
}
#h2{
font-weight: 300;
}
#p2{
font-weight: 700;
}
#p1{
font-weight:900;
}
7.HTML
font weight eg -> normal,bold,bolder,lighter
normal
lighter
bold
bolder
FONT FAMILI
font-family eg
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, doloribus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas.
7.css
#p1{
font-family: segoe ui black;
}
#p2{
font-family: cursive;
}
7.html
font-size: 10 px;
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Praesentium, doloribus?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, voluptas.
7.css
#p1{
font-family: segoe ui black;
font-size: 100pz;
}
#p2{
font-family: cursive;
font-size: 30px;
}
7.html
font-size example
fone-size eg in px
25 pxc language is develop by denish riche
50px html is stander form is hyter text markup language
100px oop is methodology and pradigm to deshign a program usign class and object.
7.css
#c{
font-size: 25px;
}
#html{
font-size: 50px;
}
#oops{
font-size : 100px;
}
Output
7.css
#c{
font-size: 25px;
line-height: 20px;
}
#html{
font-size: 50px;
line-height: normal;
}
#oops{
font-size : 30px;
line0-height: 30px
}
7.html
line-height example
20 pxc language is develop by denish riche for creating system applicaton such as driver kernel ext. c language is also know a mother language. which are define the following way .mother language,procedure oriented programming language,Structure programming language
normal html is stander form is hyter text markup language Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro maxime tempora quod, veniam error incidunt consectetur dolorum a temporibus necessitatibus!
30px oop is methodology and pradigm to deshign a program usign class and object.it is spacifies the software developer maintain by provding the same concept and define blow .
Output
transfrom-size example
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, aperiam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, dolores ipsa ipsum nesciunt in qui esse iure? Obcaecati, quia modi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi beatae obcaecati delectus. Quaerat quas ipsam nam eos dolores laborum repellat, nobis incidunt obcaecati quod?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, soluta iure quod sit fugit libero, hic assumenda, aliquam voluptatem dolores sint autem ducimus labore. Sit quam repellendus in quae optio?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis assumenda, quis molestias quaerat architecto ducimus aut neque velit consequatur quam optio libero nobis quibusdam voluptas dignissimos porro nesciunt! Sit perspiciatis ut autem tempore nobis ipsum at.
7.css
#p1{font-family: Bahnschrift SemiBold SemiConden;
font-size: 25px;
line-height:25px;
text-transform: uppercase;
}
#p2{font-family: "Lucida Handwriting";
font-size: 25px;
line-height:25px;
text-transform: lowercase;
}
#p3{font-family: Freestyle Script;
font-size: 25px;
line-height:25px;
text-transform: capitalize;}
#p4{font-family: Kristen ITC;
font-size: 25px;
line-height:25px;
text-transform: none;}
output
7.html
transfrom-size example
rahul verma
7.css
/* Q1. Create a heading cented on the page with all of its text capitilized by default. */
h1{
text-align: center;
text-transform: capitalize;
}
Output
transfrom-size example
my name is rahul
my name is aman
height
width
7.css
/* height example */
h1{
height: 100px;
background-color : lightblue;
}
Output
7.html
height
width
7.css
/* width example */
h1{
width: 100px;
background-color : lightblue;
}
Output
7.html
height
width
7.css
/* border example */
h1{
width: 300px;
text-align: center;
background-color : lightblue;
border-width: 3px;
border-style: dashed;
border-color: blue;
}
Output
7.html
height
width
7.css
/*shorted border example */
h1{
width: 300px;
text-align: center;
background-color : lightblue;
border: 5px dotted red;
}
Output
7.html
border-radius example
1
2
3
7.css
.my{
width: 100px;
height: 100px;
font-size: 20px;
font-family: cursive;
font-weight: bolder;
text-decoration: underline;
text-align: center;
text-transform: uppercase;
background-color: pink;
border: 5px solid blue;
border-radius: 50%;
}
Output
Padding example
7.html
padding example
database is a collection of realated daa
-7.css
div{
width: 80px;
height: 80px;
border: 5px solid saddlebrown;
border-radius: 2px;
padding-left: 20px;
padding-top: 40px;
padding-bottom: 40px;
padding-right: 20px;
}
Output
Shorthand padding example
padding example
div1
div 2
7.css
.my {
width: 140px;
height: 140px;
background-color : pink;
font-family: cursive;
font-size: 20px;
font-weight: bolder;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
border: 5px solid red;
border-radius: 5px;
padding : 20px 60px 20px 10px;
}
.fy{
width: 300px;
height: 300px;
font-family: cambria;
font-size: 30px;
font-weight: lighter;
text-decoration: line-through;
text-transform: uppercase;
border: 6px dotted blue;
border-radius: 50%;
background-color : lawngreen;
padding : 150px;
}
Output
padding example
div1
div 2
7.css
.my {
width: 140px;
height: 140px;
background-color : pink;
font-family: cursive;
font-size: 20px;
font-weight: bolder;
text-align: left;
text-decoration: underline;
text-transform: uppercase;
border: 5px solid red;
border-radius: 5px;
margin : 20px 60px 20px 10px;
}
.fy{
width: 300px;
height: 300px;
font-family: cambria;
font-size: 30px;
font-weight: lighter;
text-decoration: line-through;
text-transform: uppercase;
border: 6px dotted blue;
border-radius: 50%;
background-color : lawngreen;
margin: 10%;
}
Output
padding example
div1
7.css
.my {
width: 140px;
height: 140px;
background-color : pink;
border: 5px solid red;
border-radius: 5px;
margin-left:400px;
padding: 0px 0px 0px 400px;
}
Ouput
7.html
padding example
7.css
div{
width: 100px ;
height: 100px;
background-color : green ;
border-radius: 50% ;
}
Output
Que 2.
navigation
inline,block,
using iznline display property
without using inline display property
7.css
#div1{
border: 2px dashed magenta;
display: inline;
}
div{
border: 6px dotted aqua;
}
Output
7.html
inline,block,
using display : block properties
using display : block properties
7.css
/* bloack display properties example */
#button1{
background-color: skyblue ;
display : block;
}
#button2{
background-color: pink ;
}
Output
Document
this is a box div 1
div 2
div 3
7.CSS
/* kishi bhi div mai inline display set karene pare padding top or bottom se apply nhi hoti hai for example */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
OUTPUT
7.html
using inline block
this is a box div 1
div 2
div 3
7.css
/* using inline property */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline-block;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
Output
using inline block
this is a box div 1
div 2
div 3
7.css
/* using display : none property */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline-block;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
.my{
display: none;
}
Ouptput
7.html
using inline block
this is a box div 1
div 2
div 3
7.css
/* using visibility : hidden ; propertiy */
div{
padding : 25px;
margin: 25px;
width : 100px;
height : 100px;
display: inline-block;
}
#div1{
background-color: blue;
}
#div2{
background-color: red;
}
#div3{
background-color: #00ff00;
}
.my{
visibility: hidden;
}
Output
7.html
using inline block
7.css
div{
width: 100px;
height : 100px;
margin-right: 100px;
display: inline-block;
}
#div1{
background-color: rgba(0,0,255,.25);
}
#div2{
background-color: rgba(0,0,255,.40);
}
#div3{
background-color: rgba(0,0,255,1);
}
Output
7.html
Question 1
this is a color full box collection
copy right :
7.css
/* body{
background-image: url(th.jpeg);
background-size:100%;
} */
header{
#navar{
color: white;
height: 50px;
background-color: #000000;
#logo{
color: orange;
font-size: 25px;
}
}
}
button{
background-color: yellow;
}
.a{
padding-right: 100px;
}
#div1{
width: 60px;
height: 60px;
background-color: rgba(25,50,100,1);
}
#div2{
width: 60px;
height: 60px;
background-color: rgba(255,0,255,1);
}
#div3{
width: 60px;
height: 60px;
background-color: rgba(255,255,0,1);
}
#heading{
font-size: 20px;
margin: 50px,0px,0px,50xp;
}
footer{
color: white;
height: 50px;
background-color: black;
}
Output
Q2
div1
div1
div1
div1
div1
div1
7.css
div{
width: 50px;
height: 50px;
border:8px solid red;
border-radius: 5px;
}
Output
7.html
Q2
div1
div1
div1
div1
div1
7.css
#div1{
background-color: rgba(255,0,255,.5);
}
#div2{
background-color: rgba(0,255,255,.5);
}
#div3{
background-color: rgba(255,255,0,.5);
}
#div4{
background-color: rgba(1, 255, 192, 0.5);
}
#div5{
background-color: rgba(25,40,25,.5);
}
Ouput
Level 3
Document
Output
7.Html